<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				text-align: center;
				margin-top: 5px;
				margin-bottom: 20px;
			}
			ul{
				width: 200px;
				margin: 0 auto;
			}
			
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		
		 <div>
			 班级：
			<select name="class">
				<option value="0">1811</option>
				<option value="1">1813</option>
				<option value="2">1823</option>
			</select>
			
			学号：
			<select name="stu_id">
				<option value="0">1001</option>
				<option value="1">1002</option>
				<option value="2">1003</option>
			</select>
			<input id="btn" type="button" value="查询">		  
		 </div>		
		<ul></ul>
		<script>
			$(function(){
				var classidx=0, stuidx=0;				
				$("[name=class]").on("change",function(){
					classidx=$(this).val();					
				})
				$("[name=stu_id]").on("change",function(){
					stuidx=$(this).val();					
				})
				$("#btn").on("click",function(){
					$.ajax({
					url: 'data/student2.json',
					type: 'get',	
					dataType: 'json', 
					success: function(data) {
						var name=data[classidx].students[stuidx].stu_name;
						var score=data[classidx].students[stuidx].score;
						$("ul").empty();
						$("ul").append("<li>"+name+"</li>");
						$("ul").append("<li>"+score+"分"+"</li>");			
					},					
					});					
				});
			})
		</script>
	</body>
</html>
